<template>
  <div :class="$style.container">
    <ul  v-if="carts.length > 0">
      <li v-for="(item,idx) in carts" :key="'cart'+idx">
        <div style="margin-top:24px;"></div>
        <item :obj="item.film"/>
      </li>
    </ul>
    <div v-else :class="$style.noCart">
      <img v-lazy="require('../cart/imgs/empty.png')" />
      <p :class="$style.text">购物车里空空如也</p>
    </div>
    <footor :all="all" :total="sum" @isAll="handleAllChange" :class="$style.footer"
      @submit="submit"
    />
    <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
    </div>
  </div>
</template>

<script>
import http from '../../APIService/http'
import { Loading, Alert } from 'vux'
import Item from './components/item'
import Footor from './components/footor'
import * as math from 'mathjs'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      carts: [],
      sum: 0
    }
  },
  components: {
    Loading,
    Alert,
    Item,
    Footor
  },
  mounted () {
    this.init()
  },
  computed: {
    all () {
      let f = this.carts.every(p => {
        return p.film.selected
      })
      this.total()
      return f
    }

  },
  methods: {
    async init () {
      try {
        if (!this.$Cookie.getToken()) {
          this.$router.push({
            path: '/login'
          })
          return false
        }
        this.showLoading = true
        let res = await http.get(`/cart/getMyCart`)
        if (res.code === 0) {
          this.showLoading = false
          this.carts = res.data.map(item => {
            item.film.selected = true
            return item
          })
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('get cart fail:', err)
        this.showLoading = false
      }
    },
    total () {
      this.sum = 0
      this.carts.forEach(p => {
        let item = p.film
        if (item.selected) {
          this.sum = math.add(this.sum, item.price)
        }
      })
    },
    handleAllChange (f) {
      this.carts.forEach(p => {
        let item = p.film
        item.selected = f
      })
    },
    // 提交订单
    async submit () {
      try {
        let ids = []
        this.carts.forEach(p => {
          let item = p.film
          if (item.selected) {
            ids.push(p._id)
          }
        })
        let params = {
          price: this.sum,
          ids
        }
        if (ids.length === 0) {
          return false
        }
        this.showLoading = true
        let res = await http.post(`/order/createOrder`, params)
        if (res.code === 0) {
          this.showLoading = false
          this.$router.push({
            path: '/cashier',
            query: {
              id: res.data.orderId
            }
          })
        } else if (res.code === -1) {
          this.showLoading = false
          this.tip = res.msg
          this.showAlert = true
        } else {
          throw new Error('error')
        }
      } catch (err) {
        console.log('add order fail:', err)
        this.showLoading = false
        this.tip = '网络出错'
        this.showAlert = true
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  .noCart {
    margin-top:144px;
    text-align: center;
    img {
      width: 120px;
      height:120px;
    }
    .text {
      margin-top: 32px;
      font-size: 16px;
      color: #71777D;
      line-height: 18px;
    }
  }
  .footer {
    position: fixed;
    bottom:0px;
    left:0px;
    right:0px;
  }
}

</style>